<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
  <link rel='stylesheet' href='https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css' />
  <style>
    .todoAdd {
      display: flex;
    }

    .el-input__inner {
      border-radius: 100px;
      box-shadow: 0px 0px 5px 2px rgb(235, 228, 228);
    }

    .standard_shade.grey {
      box-shadow: 0px 0px 5px 0px rgb(235, 228, 228);
    }

    .standard_shade.sky {
      box-shadow: 0px 0px 10px 2px rgb(23, 107, 242);
    }
  </style>
</head>

<body>
  <div id='todoApp'>
    <h4 style="text-align: center;">欢迎使用i todos 代办:</h4>
    <todo-add :tid="todos.length" @add-todo="addTodo"></todo-add>
    <div style="padding: 10px;color: grey;">
      <span style="margin: 5px 15px 0px 0px" @click="handleClick" v-for="(item,index) in schedule" :key="index">
        {{ item.name }}
      </span>
    </div>

    <!-- <todo-filter></todo-filter> -->
    <todo-list :todos="todos"></todo-list>
  </div>


  <template id="todoFilter">
    子组件内容 {{msg}} {{count}}
    <button @click="count++">add</button>
  </template>

  <template id="todoListItem">
    <el-row class="standard_shade grey" style="padding: 20px; margin-bottom: 10px;border-radius: 5px;">
      <el-col :span="24">
        <!-- <el-card id="content" shadow="always" :body-style="{ padding: '20px' }">
          </el-card> -->
        <el-checkbox v-model="checked" label="content" :indeterminate="false" @change="handleCheck(todoItem)">
          {{todoItem.content}}
        </el-checkbox>
      </el-col>
    </el-row>
  </template>

  <template id="todoList">
    <todo-list-item v-for="todo in todos" :key="todo.id" @handle-check="handleCheck" :todo-item="todo"></todo-list-item>
  </template>

  <template id="todoAdd">
    <el-row>
      <el-col :span="24">
        <el-input v-model="todoContent" style="border-radius: 30px;position: relative;" placeholder="待办事项" size="normal"
          clearable @keyup.enter="emitAddTodo">
        </el-input>
        <el-button class="standard_shade sky" style="position: absolute;right: 0px;" type="primary" circle
          size="default" @click="emitAddTodo">
          <i class="fa fa-plus" aria-hidden="true"></i>
        </el-button>
      </el-col>
    </el-row>
  </template>

  <script src='https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.prod.js'></script>
  <script src='https://cdn.bootcdn.net/ajax/libs/vue-router/4.0.0-rc.1/vue-router.global.prod.min.js'></script>
  <script src='https://cdn.bootcdn.net/ajax/libs/vuex/4.0.0-rc.1/vuex.global.prod.min.js'></script>
  <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
  <script src='https://cdn.bootcss.com/lodash.js/4.17.10/lodash.min.js'></script>
  <script>
    const { createApp, ref, reactive } = Vue
    const TodoAdd = {
      name: "TodoAdd",
      template: "#todoAdd",
      // 先声明后取值 https://www.icode9.com/content-4-737207.html
      props: {
        tid: Number
      },
      setup(props, context) {
        const todoContent = ref('')
        const emitAddTodo = () => {
          const todo = {
            id: props.tid,
            content: todoContent.value,
            completed: false
          }
          context.emit('add-todo', todo)
          todoContent.value = ""
        }
        return {
          todoContent,
          emitAddTodo
        }
      }
    }
    const TodoFilter = {
      template: "#todoFilter",
    }
    const TodoListItem = {
      template: "#todoListItem",
      props: ["todoItem"],

      setup(props, context) {
        let checked = ref(false)
        const handleCheck = (todoItem) => {
          checked.value === true ? false : true
          // todoItem.completed = !todoItem.completed
          // context.emit('handle-check', todoItem)
        }
        return {
          checked,
          handleCheck,
        }
      }
    }

    const TodoList = {
      template: "#todoList",
      props: ["todos"],
      components: {
        TodoListItem,
      },
      setup() {
        const handleCheck = (item) => {
          console.log(item);
          // todos.value.map((todo, index) => {
          //   todo.id = item.id ? todo.completed = !todo.completed : ""
          // })
        }
        return {
          handleCheck
        }
      },
    }

    const App = {
      name: "App",
      setup() {
        const schedule = reactive([{ name: "代办", active: false }, { name: "已办", active: false }, { name: "未办", active: false }])
        const todos = ref([])
        const addTodo = (todo) => todos.value.push(todo)
        const handleClick = (i) => {
          schedule[i].active = true
        }
        console.log(todos);
        return {
          todos,
          addTodo,
          schedule
        }
      },
      components: {
        todoAdd: TodoAdd,
        TodoFilter,
        TodoList
      }
    }
    const app = createApp(App)
    app.use(ElementPlus);
    app.mount('#todoApp')
  </script>
</body>

</html>